import React from 'react';
import { render } from 'react-dom';

// 生命周期

class Child extends React.Component{

  constructor(){
    super()
    this.state={
      sta:"我是sta"
    }
  }

  // 更新

  // 组件接受新的参数
  componentWillReceiveProps(newww_props){
    console.log('componentWillReceiveProps',newww_props,this.props)
  }
  //即将更新
  // 准备更新参数都是新的
  componentWillUpdate(props,state){
    console.log("componentWillUpdate",props,state,this.props)
  }
  //已经更新
  componentDidUpdate(){
    console.log(' Clib  componentDidUpdate',this.props)
  }
//控制组件是否更新
  shouldComponentUpdate(new_props,new_state){
    console.log('shouldComponentUpdate')
    // return false
  }


  // 进行新旧对比
  render(){
    const {num} = this.props
    return(
      <div>{num}</div>
    )
  }
}


class App extends React.Component{


  //挂载阶段

  // 第一实例化
  constructor(){
    super()
    // console.log('constructor')
    this.state={
      cont:0
    }
  }
// 4用的很多
  componentDidMount(){
    console.log('componentDidMount')
    this.setState({
      cont:1
    })
    }

  // 2
  componentWillMount(){
    // console.log('componentWillMount')
  }


// 3
  render(){
    const {cont} = this.state
    console.log('render')
    return(
      <h1><Child num={cont}/></h1>
    )
  }
}
export default App;
